import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:winkai/res/app_colors.dart';
import 'package:winkai/res/dimens.dart';
import 'package:winkai/ui/discover/controller/discover_controller.dart';

class DiscoverSliderWidget extends StatefulWidget {
  const DiscoverSliderWidget({super.key});

  @override
  State<DiscoverSliderWidget> createState() => _DiscoverSliderWidgetState();
}

class _DiscoverSliderWidgetState extends State<DiscoverSliderWidget> {
  final controller = Get.find<DiscoverController>();

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DiscoverController>(builder: (context) {
      return Container(
        height: 56.w,
        padding: EdgeInsets.symmetric(vertical: 10.w),
        child: ListView.separated(
            padding:
                EdgeInsets.symmetric(horizontal: Dimens.mainHorizontalSpacing),
            scrollDirection: Axis.horizontal,
            physics: const BouncingScrollPhysics(),
            itemBuilder: (context, index) {
              String name;
              if (index == 0) {
                name = 'root_discover_all'.tr;
              } else if (index == 1) {
                name = 'root_discover_realistic'.tr;
              } else {
                name = 'root_discover_anime'.tr;
              }
              return _buildItem(name, index);
            },
            separatorBuilder: (context, index) => SizedBox(width: 12.w),
            itemCount: 3),
      );
    });
  }

  Widget _buildItem(String name, int index) {
    var isSelect = controller.currentIndex == index;
    var text = Text(
      name,
      style: TextStyle(
        fontSize: 14.sp,
        fontFamily: 'LexendDeca',
        color: isSelect ? Colors.black : AppColors.color_80,
        fontWeight: isSelect ? FontWeight.w800 : FontWeight.w600,
      ),
    );
    return GestureDetector(
      onTap: () {
        controller.selectPage(index);
      },
      child: Container(
        width: index == 0
            ? 81.w
            : index == 1
                ? 88.w
                : 77.w,
        height: 36.w,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: isSelect ? Colors.black : Colors.white),
        child: isSelect
            ? Stack(
                alignment: Alignment.center,
                children: [
                  Container(
                    width: double.infinity,
                    height: double.infinity,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(9),
                        color: AppColors.mainColor),
                    margin: EdgeInsets.only(
                        top: 1.w, left: 1.w, right: 1.w, bottom: 2.w),
                  ),
                  text,
                ],
              )
            : text,
      ),
    );
  }
}
